<template>
  <div class="box" :style="user.homeTheme ? 'background-color: #000' : ''">
    <vue-particles
      ref="particles"
      class="content-bg"
      :color="user.liziColor"
      :particleOpacity="0.7"
      :particlesNumber="100"
      shapeType="circle"
      :particleSize="4"
      :linesColor="user.liziColor"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="3"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
      style="height: 100%"
      v-if="show"
    />
    <div class="home" :style="user.homeTheme ? 'color: #fff' : ''">
      <img :src="user.userDatas.photo" v-if="user.userDatas.photo" />
      <h2>
        欢迎您，尊敬的 <i>{{ user.userDatas.name }}</i
        >，您可以在此查看个人信息
      </h2>
      <div class="data">
        <a-row class="row">
          <a-col :span="24" class="title">
            <span>个人信息</span>
          </a-col>
        </a-row>
        <a-row class="row">
          <a-col :span="12">
            <label class="label">姓名：</label>
            <a-input disabled :value="user.userDatas.name" class="input" />
          </a-col>
          <a-col :span="12">
            <label class="label">性别：</label>
            <a-input disabled :value="user.userDatas.sex" class="input" />
          </a-col>
        </a-row>
        <a-row class="row">
          <a-col :span="12">
            <label class="label">城市：</label>
            <a-input disabled :value="user.userDatas.city" class="input" />
          </a-col>
          <a-col :span="12">
            <label class="label">学校：</label>
            <a-input disabled :value="user.userDatas.school" class="input" />
          </a-col>
        </a-row>
        <a-row class="row">
          <a-col :span="12">
            <label class="label">电话：</label>
            <a-input disabled :value="user.userDatas.phone" class="input" />
          </a-col>
          <a-col :span="12">
            <label class="label">邮箱：</label>
            <a-input disabled :value="user.userDatas.email" class="input" />
          </a-col>
        </a-row>
        <a-row class="row" align="middle" justify="space-around">
          <label class="label">设置粒子颜色：</label>
          <a-select
            ref="select"
            :value="user.liziColor"
            style="width: 67%"
            @change="handleChange"
          >
            <a-select-option
              v-for="(color, index) in colorList"
              :value="color"
              :key="index"
              >{{ color }}</a-select-option
            >
          </a-select>
        </a-row>
        <a-row class="row" align="middle" justify="space-around">
          <label class="label">黑夜模式：</label>
          <a-switch v-model:checked="user.homeTheme" style="width: 72%" />
        </a-row>
        <a-row
          class="row"
          align="middle"
          justify="space-around"
          style="font: italic 700 16px '宋体'; color: #ccc"
        >
          无后端接口，所用皆为pinia临时数据和mockjs模拟数据，退出后将重置
        </a-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
};
</script>

<script setup>
import useUserStore from "@/store/modules/user";
import { ref, onMounted } from "vue";

const user = useUserStore();

const particles = ref();

const colorList = ref([]);

const colorListData = () => {
  const color = "0123456789abcdef";
  for (let i = 0; i < 30; i++) {
    let colorStr = "";
    for (let j = 0; j < 6; j++) {
      const charAt = color.charAt(Math.floor(Math.random() * 16));
      colorStr += charAt;
    }
    colorList.value.push("#" + colorStr);
  }
};

const show = ref(true);

const handleChange = (color) => {
  user.liziColorChange(color);
  show.value = false;
  setTimeout(() => {
    show.value = true;
  }, 10);
};

onMounted(() => {
  colorListData();
});
</script>

<style scoped lang="scss">
.box {
  position: relative;
  height: 100%;

  .home {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    img {
      height: 80px;
      width: 80px;
      border-radius: 50%;
      margin-bottom: 20px;
    }

    .data {
      margin-top: 25px;

      .row {
        margin-top: 20px;
      }

      .title {
        font-size: 18px;
        height: 30px;
      }

      .label {
        color: #6340ec;
      }

      .input {
        text-align: center;
        border: none;
        width: 70%;
        color: #999;
      }
    }
  }
}
</style>
